<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-col :span="20">
          <el-row :gutter="20">
            <el-col :span="24" style="padding: 15px; ">
              <el-row :gutter="20" style="background: #f4f4f5;padding:10px;">
                <el-col :span="5">
                  <el-input placeholder="产品名称" v-model="pageQuery.thinkBaseInfo.thinkName"
                            v-on:keyup.enter.native="getData" size="small" clearable></el-input>
                </el-col>
                <el-col :span="2" style="text-align: center;">
                  <el-button type="success" @click="getData"  icon="el-icon-search" size="small" circle></el-button>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="1">&nbsp;</el-col>
      </el-col>
    </el-row>
    <el-row>
      <el-button @click="addThinkBaseInfo" type="primary">新增</el-button>
      <el-button @click="getData" type="primary" icon="el-icon-refresh">刷新</el-button>
    </el-row>
    <el-table :data="tableData" ref="table" style="width: 100%">
      <el-table-column width="100" label="操作" fixed="left">
        <template slot-scope="scope">
          <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)"></el-button>
          <el-button type="text" icon="el-icon-delete" @click="handleDelete(scope.$index, scope.row)"></el-button>
        </template>
      </el-table-column>
      <el-table-column class="text-overflow"
                       :show-overflow-tooltip="true" prop="thinkTypeId" label="产品类型" :formatter="thinkTypeFormatter">
      </el-table-column>
      <el-table-column class="text-overflow"
                       :show-overflow-tooltip="true" prop="thinkName" label="产品名称">
      </el-table-column>
      <el-table-column class="text-overflow"
                       :show-overflow-tooltip="true" prop="title" label="产品标题">
      </el-table-column>
      <el-table-column class="text-overflow"
                       :show-overflow-tooltip="true" prop="description" label="产品描述">
      </el-table-column>
      <el-table-column class="text-overflow"
                       :show-overflow-tooltip="true" prop="href" label="产品超链接">
      </el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next"></el-pagination>
    <!--    编辑框-->
    <thinkBaseInfo-edit :dialogVisible="dialogVisible" v-if="dialogVisible" :params="params"
                        @thinkBaseInfo-edit-close="thinkBaseInfoEditClose"></thinkBaseInfo-edit>
    <!--    分页组件-->
    <el-pagination @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   layout="total, sizes, prev, pager, next, jumper"
                   :page-sizes="[10,20,100, 200, 300, 400]"
                   :page-size="pageQuery.size"
                   :current-page="pageQuery.page"
                   :total="total"></el-pagination>
  </div>

</template>
<script>
export default {
  data() {
    return {
      searArgs: {
        thinkBaseInfoName: ''
      },
      params: {
        pkId: "",
        operation: ""
      },
      tableData: [],
      dialogVisible: false,//显示编辑框 addthinkType
      thinkTypeVisible: false,//显示编辑框
      thinkTypeOptions: [],//产品类型
      pageQuery: {
        page: 1,
        size: 10,
        thinkBaseInfo: {
          thinkName: ""
        }

      },
      total: 0,
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    handleSizeChange(val) {
      this.pageQuery.size = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.pageQuery.page = val;
      this.getData();
    },
    // 格式化产品类型`
    thinkTypeFormatter(row) {
      for (let index in this.thinkTypeOptions) {
        if (this.thinkTypeOptions[index].pkId === row.thinkTypeId) {
          return this.thinkTypeOptions[index].thinkType;
        }
      }
      return "";
    },
    initThinkTypeList() {
      this.http.get(this.api.thinkType.list, res => {
        this.thinkTypeOptions = res.data;
      }, (error) => {
        console.log("查询岗位信息错误-》" + error);
      })
    },
    thinkBaseInfoEditClose() {
      this.dialogVisible = false;
      this.getData();
    },
    handleEdit(index, row) {
      this.params.pkId = row.pkId;
      this.params.operation = "修改";
      this.dialogVisible = true;
    },
    addThinkBaseInfo() {
      this.params.pkId = "";
      this.params.operation = "新增";
      this.dialogVisible = true;
    },
    handleDelete(index, row) {
      this.$confirm('确认删除产品信息吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.http.get(this.api.thinkBaseInfo.deleteById + "/" + row.pkId, res => {
          if (res.code == 200) {
            this.$message({type: 'success', message: '删除成功!'});
            this.getData();
          }
        }, (error) => {
          console.log(error)
        })
      }).catch(() => {
        this.$message({type: 'info', message: '已取消删除'});
      });
    },
    getData() {
      this.http.post(this.api.thinkBaseInfo.pageList,this.pageQuery, res => {
        this.tableData = res.data;
        this.total = res.total;
      }, (error) => {
        console.log(error)
      })
      this.initThinkTypeList();
    },
  },
  components: {
    "thinkBaseInfo-edit": thinkBaseInfoEdit,
  }
}
import thinkBaseInfoEdit from "./thinkBaseInfoEdit.vue";
</script>
<style>
.grid-content {
  padding: 15px;
  height: 65px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.grid-content img {
  height: 65px;
}

.grid-content p {
  font-size: 16px;
  margin: 0;
  padding: 0;
  color: #00b8d2;
  font-weight: 600;
}

.check-info {
  float: right;
  text-align: right;
  color: #00b8d2;
}

.check-info span:nth-child(1) {
  font-size: 35px;
  font-weight: 700;
  display: block;
}

.el-table td, .el-table th {
  padding: 5px 0 !important;
}

.el-table .cell {
  cursor: pointer !important;
}
</style>
